<template>
  <div style="height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #0f9fff">
    <div style="display: flex; background-color: white; width: 50%; border-radius: 5px; overflow: hidden">
      <div style="flex: 1">
        <img src="@/assets/register.png" alt="" style="width: 100% ;height: 100%">
      </div>
      <div style="flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column;">
        <el-form :model="user" style="width: 80%" :rules="rules" ref="loginRef">
          <div style="font-size: 20px; font-weight: bold; text-align: center; margin-bottom: 20px">欢迎登录校园招聘系统</div>
          <el-form-item prop="username">
            <el-input prefix-icon="el-icon-user" size="medium" placeholder="请输入用户名" v-model="user.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-lock" size="medium" show-password placeholder="请输入密码" v-model="user.password"></el-input>
          </el-form-item>
          <el-form-item prop="checkPass">
            <el-input prefix-icon="el-icon-lock" size="medium" show-password placeholder="请再次输入密码" v-model="checkPass"></el-input>
          </el-form-item>
          <el-form-item style="display: flex; justify-content: center; width: 100%;">
            <el-button type="primary" style="width: 100%;" @click="update">更改密码</el-button>
          </el-form-item>
          <el-form-item style="display: flex; justify-content: center; width: 100%;">
            <el-button type="primary" style="width: 100%;" @click.native="$router.push('/login1')" >返回</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>
  </div>
</template>


<script>

import axios from "axios";

export default {
  name: "Login1",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.checkPass !== '') {
          this.$refs.user.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      value=this.checkPass;
      console.log(value)
      console.log(this.user.password)
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.user.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      dialogFormVisible: false,
      user: {
        username: '',
        password: '',
      },
      checkPass: '',
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
        ],
        password: [
          {required: true, validator: validatePass,trigger: 'blur'}
        ],
        checkPass: [
          {required: true,  validator: validatePass2,trigger: 'blur'}
        ],
      }
    }
  },
  created() {
  },
  methods: {
    update(){
      axios.post('http://localhost:8080/User/update',this.user)
          .then(response=>{
            // 处理新增成功逻辑
            this.$message.success("更新成功");
            this.dialogVisible = false;
            this.$router.push("/login1");
          })
          .catch(error => {
            // 处理新增失败逻辑
            console.error('Error adding new item:', error);
            this.$message.error("新增失败");
          });
    }
  }
}
</script>

<style scoped>

</style>